<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            height: 60px;
            border: 1px solid #333;

            /*1.通过设置行高来使元素内的文本垂直居中（行高=元素高度）*/
            line-height: 60px;
        }

        .box2 {
            display: flex;
        }
        .box2>div {
            font-size: 22px;
            margin-right: 20px;
        }
        .box2>div:nth-of-type(1)>img{
            vertical-align: bottom;  /*默认为底部,默认*/
        }
        .box2>div:nth-of-type(2)>img{
            vertical-align: top;  /*设置top顶部*/
        }
        .box2>div:nth-of-type(3)>img{
            vertical-align: middle;  /*文字放置在图片垂直中间位置*/
        }
        .box2>div:nth-of-type(4)>img{
            vertical-align: baseline; /*baseline为基准线*/
        }


        .box3 {
            display: flex;
        }
        .box3>div {
            margin-right: 20px;
        }
        .box3>div:nth-of-type(1) {
            display: flex;
            align-items: center;
        }
        .box3>div:nth-of-type(2) {
            display: flex;
            align-items: center;
        }

        .box4 {
            display: grid;
            grid-template-columns: 220px 220px;
        }
        .box4>div:nth-of-type(1),
        .box4>div:nth-of-type(2){
            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
        }

        .father {
            height: 150px;
            width: 100px;
            background:#000;
            position: relative
        }
        .son {
            height: 80px;
            width: 50px;
            background:#f00;
            position: absolute;

            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /*transform: translateY(-50%);*/
        }
    </style>
</head>
<body>
    <h1>元素垂直居中</h1>

    <h2>文本内容垂直居中</h2>
    <div class="box1">
        测试文本内容
    </div>


    <!--<h2>图文混排处理 vertical-align : 控制行内元素（例如图像）与周围文本的垂直对齐方式 </h2>
    <div class="box2">
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <span>Apple图文混排</span>
            &lt;!&ndash; 当存在图片时，文字默认排列以图片的最底边来排列&ndash;&gt;
        </div>
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <span>Apple图文混排</span>
        </div>
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <span>Apple图文混排</span>
        </div>
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <span>Apple图文混排</span>
        </div>
    </div>-->

    <!--<h2>Flex实现图文混排</h2>
    <div class="box3">
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <span>Apple图文混排</span>
        </div>
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <div>Apple图文混排</div>
        </div>
        <div style="height: 150px; width: 100px; background:#000; display: flex; align-items: center">
            <div style="height: 80px;width: 50px; background:#f00;"></div>
        </div>
    </div>-->


    <!--<h2>grid实现图文混排</h2>
    <div class="box4">
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <span>Apple图文混排</span>
        </div>
        <div>
            <img src="images/肖申克的救赎.jpg" width="100"/>
            <div>Apple图文混排</div>
        </div>
       &lt;!&ndash; <div style="height: 150px; width: 100px; background:#000; display: grid; align-items: center">
            <div style="height: 80px;width: 50px; background:#f00;"></div>
        </div>&ndash;&gt;
    </div>-->

    <h2>父相子绝定位实现</h2>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>